<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-写作突破-亮点单词/短语'"> </Breadcrumb>
        <view class="content">
          <WordTest2
            ref="WordTest2"
            v-if="type === 'test'"
            :wordList="wordList"
            @showPopup="showPopup"
            @back="handleBack"
          ></WordTest2>
        </view>
      </view>
    </view>
    <u-mask :show="isShowPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_img">
          <image
            v-if="number > 0"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="popup_title"
          ><text>本次消灭</text><text>{{ number }}</text
          ><text>个单词</text></view
        >
        <view class="popup_button">
          <view class="popup_button_content" @click="viewDetails()">
            <text>查看详情</text>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/start_arrow.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="popup_button_content" @click="handleBack()">
            <text>返回生词本</text>
            <image
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/start_arrow.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import { getRandowNewWordList, deleteNewWordList } from "@/api/composition";
export default {
  components: {},
  data() {
    return {
      id: "",
      wordList: [],
      type: "",
      isShowPopup: false,
      number: 0,
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      let params = {
        typeId: this.id,
      };
      getRandowNewWordList(params).then((res) => {
        this.wordList = res.data;
        this.type = "test";
      });
    },
    showPopup(number, list) {
      this.number = number;
      this.isShowPopup = true;
      if (list.length > 0) {
        let wordIds = [];
        list.forEach((item) => {
          wordIds.push(item.id);
        });
        let params = {
          wordIds: wordIds,
        };
        deleteNewWordList(params);
      }
    },
    viewDetails() {
      this.isShowPopup = false;
      this.$refs.WordTest2.showDetail();
    },
    handleBack() {
      uni.navigateTo({
        url: "/pages/composition/compositionPhrase",
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./compositionPhraseEliminate.scss";
</style>
